<template>
  <view class="orderList">
    <view class="lineOne">
      <view class="search">
        <u-search
          v-model="keyword"
          @change="$u.throttle(resetList, 500, false)"
          placeholder="输入收货单号"
          :showAction="false"
          height="26"
        ></u-search>
      </view>
      <filteate :list="options" @submit="handelSubmit"></filteate>
    </view>
    <view class="tabs" v-if="!selectPage">
      <u-tabs
        :list="stateList"
        :scrollable="false"
        @change="handleChange"
        :activeStyle="{
          color: '#FD4D00',
        }"
        lineColor="#FD4D00"
        lineWidth="50"
      ></u-tabs>
    </view>
    <view class="list" :class="selectPage && 'select'" :style="listHeight">
      <u-list
        v-if="orderList.length !== 0"
        :height="selectPage ? 'calc(100vh - 45px)' : listHeight.height"
        @scrolltolower="getMore"
      >
        <u-list-item v-for="item in orderList" :key="item.id">
          <view class="print">
            <view
              class="leftBox"
              @click="() => handleItem(item)"
              v-if="selectPage"
            >
              <initRadio
                size="16"
                :modelValue="radioValue.id === item.id"
              ></initRadio>
            </view>
            <view class="rightBox">
              <receiptListItem
                :data="item"
                @detail="goToDetail"
                @click="goToCheck"
              ></receiptListItem>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <emptyList v-else></emptyList>
    </view>
  </view>
</template>

<!-- 收货单列表 -->
<script setup>
import { ref, computed } from "vue";
import filteate from "@/components/initPopup/filteate.vue";
import receiptListItem from "@/components/orderList/receiptListItem.vue";
import { useListHeight } from "@/hooks/useListHeight.js";
import initRadio from "@/components/initRadio/initRadio.vue";
import emptyList from "@/components/empty/emptyList.vue";
import { receiptOrderList } from "@/api/order";
import { useList } from "@/hooks/useList";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/user";
import { useOrderStore } from "@/store/order";

const { listHeight } = useListHeight({
  el: ".list",
});
const selectPage = ref(false);
onLoad((params) => {
  if (params.isSelect) {
    selectPage.value = true;
    currentState.value = 3;
  }
});
const orderStore = useOrderStore();
const contactOrder = computed(() => {
  return orderStore.contactOrder;
});
const radioValue = ref(contactOrder.value || {});
const options = [
  {
    name: "送货日期",
    type: "timeRange",
    value: "createTime",
    initValue: [],
  },
];
const stateList = ref([
  {
    name: "全部",
    value: "",
  },
  {
    name: "待收货",
    value: 2,
  },
  {
    name: "已收货",
    value: 3,
  },
]);
const keyword = ref("");
const searchParams = ref({}); //筛选
const currentState = ref(""); // tab状态
const handelSubmit = (data) => {
  let obj = {};
  for (let name in data) {
    if (name === "createTime") {
      const time = data[name];
      if (time && time.length !== 0) {
        obj.startDate = new Date(time[0]).getTime();
        obj.endDate = new Date(time[time.length - 1]).getTime();
      }
    } else if (data[name] !== undefined) {
      obj[name] = data[name];
    }
  }
  searchParams.value = obj;
  resetList();
};
const handleChange = ({ value }) => {
  currentState.value = value;
  resetList();
};
const shopId = computed(() => {
  return useUserStore().shopId;
});
const getList = async (item) => {
  const res = await receiptOrderList({
    ...item,
    shopId: shopId.value,
    orderCode: keyword.value,
    ...searchParams.value,
    billState: currentState.value,
  });
  return res;
};
const { orderList, getMore, resetList } = useList(getList);

const goToDetail = (item) => {
  if (selectPage.value) {
    handleItem(item);
    return;
  }
  uni.navigateTo({
    url: "/pages/orderList/receipt/receiptListDetail?id=" + item.id,
  });
};
const goToCheck = (item) => {
  uni.navigateTo({
    url: "/pages/orderList/receipt/receiptListSave?id=" + item.id,
  });
};
const handleItem = (item) => {
  radioValue.value = item;
  orderStore.setContactOrder(item);
  uni.navigateBack();
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.lineOne {
  display: flex;
  align-items: center;
  height: 45px;
  justify-content: space-between;
  padding: 0 12px;
  background-color: #fff;

  .search {
    flex: 1;
    margin-right: 6px;
  }
}

.tabs {
  background-color: #fff;
}

.list {
  &.select {
    padding: 0;
    ::v-deep(.orderListItem) {
      box-shadow: none;
    }
  }
  padding: 0 15px;
  .u-list-item {
    margin-top: 10px;
    &:last-child {
      margin-bottom: 10px;
    }
    .print {
      display: flex;
      align-items: center;
      background-color: #fff;
      .leftBox {
        padding-right: 16px;
        padding-left: 13px;
      }
      .rightBox {
        flex: 1;
      }
    }
  }
}
</style>
